<template>
  <div>
    <el-table :data="list" stripe border>
      <el-table-column prop="_id" label="ID" align="center"></el-table-column>
      <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
       <el-table-column prop="num" label="数量" align="center" width="50"></el-table-column>
      <el-table-column prop="brand" label="品牌" align="center" width="100"></el-table-column>
      <el-table-column prop="classify" label="分类名称" align="center" width="80"></el-table-column>
      <el-table-column label="商品图片" align="center" width="160">
        <template slot-scope="scope">
          <el-image v-for="(item, index) in scope.row.img" :key="index" style="width: 60px; height: 60px" :src="item.url" :preview-src-list="[item.url]"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="retailPrice" label="价格" align="center" width="60"></el-table-column>
      <el-table-column prop="originalPrice" label="原价" align="center" width="60"></el-table-column>
      <el-table-column prop="unit" label="单位" align="center" width="60"></el-table-column>
      <el-table-column prop="intro" label="商品简介" align="center"></el-table-column>
      <el-table-column prop="JDprice" label="京东售价" align="center" width="60"></el-table-column>
      <el-table-column prop="TMprice" label="淘宝售价" align="center" width="60"></el-table-column>
      <el-table-column prop="referenceURL" label="参考链接" align="center"></el-table-column>
       <el-table-column prop="addTime" label="上架时间" align="center">
         <template slot-scope="scope">
          <div>{{scope.row.addTime | time}}</div>
        </template>
       </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope" align="center">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getGoods, deleteGoods } from '../../utils/api/goods'
import dayjs from 'dayjs'
export default {
    name: 'goodsList',
    filters: {
      time (value) {
        if (!value) return
        return dayjs(value).format('YYYY-MM-DD')
      }
    },
    data () {
      return {
        list: []
      }
    },
    created() {
      this.getList()
    },
    methods: {
      // 编辑
      handleEdit (row) {
        this.$router.push({
           path: `/addGoods/${row._id}` 
        })
      },
      async handleDelete (row) {
        let res = await deleteGoods(row._id)
        if (res.code === 200) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getList()
        }
      },
      // 获取商品列表
      async getList () {
        let res = await getGoods()
        this.list = res.items
      }
    }
}
</script>

<style>

</style>